import {colorType} from "./marker"

import {PopupOption} from "./types"

/*建筑提示*/
const buildToolTip = {
  red: {
    fill: '#532A2F',
    stroke: '#D82B33',
    bg:'bg-[#532A2F]',
    borderColor:'border-[#D82B33]'
  },
  blue: {
    fill: '#0B2860',
    stroke: '#3E6CC5',
    bg:'bg-[#0B2860]',
    borderColor:'border-[#3E6CC5]'
  }
}

const buildSvg = `<svg viewBox="0 0 1024 1024" width="16" height="18"><path d="M384 53.312c-35.968 0-67.072 1.856-93.12 7.552-26.368 5.76-49.6 16-67.84 34.24-18.112 18.176-28.352 41.408-34.176 67.84-5.696 25.984-7.552 57.088-7.552 93.056v629.312h-32a42.688 42.688 0 1 0 0 85.376h725.376a42.688 42.688 0 0 0 0-85.376h-32V256c0-35.968-1.856-67.072-7.552-93.12-5.824-26.368-16-49.6-34.24-67.84-18.176-18.112-41.408-28.352-67.84-34.176-25.984-5.76-57.088-7.552-93.056-7.552H384z m266.688 832h-64V800c0-17.088-0.768-28.928-2.304-37.376-1.536-8.32-3.392-10.88-3.84-11.264a2.816 2.816 0 0 0-0.832-0.64 17.472 17.472 0 0 0-4.352-1.728 116.032 116.032 0 0 0-27.776-2.304H476.48c-13.888 0-22.4 0.896-27.776 2.304a17.472 17.472 0 0 0-4.48 1.664 2.816 2.816 0 0 0-0.832 0.64c-0.32 0.512-2.24 3.008-3.712 11.328a218.496 218.496 0 0 0-2.368 37.376v85.312h-64V800c0-18.24 0.768-34.688 3.392-48.896 2.56-14.272 7.488-28.672 17.536-40.704 20.864-25.088 53.376-27.712 82.24-27.712h71.04c28.864 0 61.376 2.624 82.24 27.712 10.048 12.032 14.912 26.432 17.536 40.704 2.56 14.208 3.392 30.72 3.392 48.896v85.312zM448 224h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z m0 149.312h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z m0 149.376h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z" fill="#FFFFFF" ></path> </svg>`

export const usePopup = () => {


  /*创建建筑popup 内容*/
 /* const createBuildingPopupContent = (colorType: colorType = "blue", popupOptions?:PopupOption) => {
    const bt = buildToolTip[colorType]
    let textContent = ""

    if (colorType === "blue") {
      textContent = `<div class="px-[11px] py-[8px] border ${bt.bg} ${bt.borderColor} flex items-center">
      ${buildSvg}
          <span class="ml-[8px] text-[14px] whitespace-nowrap text-white ">${popupOptions.buildingName}</span>
      </div>`
    }else {
      const alarmCount = popupOptions.alarmCount > 99 ? '99+' : popupOptions.alarmCount
      textContent = `<div class="flex items-center">
        <div class="ml-[-25px] h-[30px] px-[11px] py-[8px] border ${bt.bg} ${bt.borderColor} flex items-center relative">
         <div class="absolute left-[-46px] ">
          <svg width="96" height="96"><image width="96" height="96" xlink:href=""/></svg></div><div class="bg-gradient-to-r from-[#390A00] to-[#390a001c] px-[4px] py-[2px]
            leading-[16px] text-[#FF1520] text-[14px] font-[800] mr-[4px]">
            ${alarmCount}
          </div><svg viewBox="0 0 1024 1024" width="16" height="18"><path d="M384 53.312c-35.968 0-67.072 1.856-93.12 7.552-26.368 5.76-49.6 16-67.84 34.24-18.112 18.176-28.352 41.408-34.176 67.84-5.696 25.984-7.552 57.088-7.552 93.056v629.312h-32a42.688 42.688 0 1 0 0 85.376h725.376a42.688 42.688 0 0 0 0-85.376h-32V256c0-35.968-1.856-67.072-7.552-93.12-5.824-26.368-16-49.6-34.24-67.84-18.176-18.112-41.408-28.352-67.84-34.176-25.984-5.76-57.088-7.552-93.056-7.552H384z m266.688 832h-64V800c0-17.088-0.768-28.928-2.304-37.376-1.536-8.32-3.392-10.88-3.84-11.264a2.816 2.816 0 0 0-0.832-0.64 17.472 17.472 0 0 0-4.352-1.728 116.032 116.032 0 0 0-27.776-2.304H476.48c-13.888 0-22.4 0.896-27.776 2.304a17.472 17.472 0 0 0-4.48 1.664 2.816 2.816 0 0 0-0.832 0.64c-0.32 0.512-2.24 3.008-3.712 11.328a218.496 218.496 0 0 0-2.368 37.376v85.312h-64V800c0-18.24 0.768-34.688 3.392-48.896 2.56-14.272 7.488-28.672 17.536-40.704 20.864-25.088 53.376-27.712 82.24-27.712h71.04c28.864 0 61.376 2.624 82.24 27.712 10.048 12.032 14.912 26.432 17.536 40.704 2.56 14.208 3.392 30.72 3.392 48.896v85.312zM448 224h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z m0 149.312h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z m0 149.376h128a32 32 0 0 1 0 64H448a32 32 0 0 1 0-64z" fill="#FFFFFF" ></path></svg>
          <span class="ml-[8px] text-[14px] whitespace-nowrap text-white ">
         ${popupOptions.buildingName}
      </span></div></div>`
    }

    return textContent
  }*/
  const createBuildingPopupContent = (colorType: colorType = "blue", popupOptions?:PopupOption) => {
    
    const bt = buildToolTip[colorType]
    // const p = JSON.stringify(params)
    return `<div class="h-[30px] px-[12px] cursor-pointer relative ${bt.bg} border ${bt.borderColor} flex items-center rounded-[4px]">
    <svg viewBox="0 0 1024 1024" width="20" height="20" >
      <path
        d="M499.136 64c-94.976 0-189.952 36.224-262.4 108.736-145.024 144.896-145.024 379.84 0 524.736L499.136 960l262.4-262.528c145.088-145.024 145.088-379.968 0-524.736C689.152 100.224 594.112 64 499.136 64L499.136 64zM499.136 576C463.808 576 431.808 561.6 408.64 538.496 385.472 515.392 371.136 483.392 371.136 448c0-70.72 57.28-128 128-128 70.72 0 128 57.28 128 128 0 35.392-14.4 67.392-37.504 90.496C566.528 561.6 534.464 576 499.136 576L499.136 576z"
        fill="#FFFFFF" p-id="9556" stroke-width="40" stroke="${bt.stroke}"></path>
    </svg>
    <span class="ml-[6px] text-[14px] whitespace-nowrap text-white cursor-pointer">${popupOptions.buildingName}</span>
    <div class="w-full h-[10px] ml-[-12px] absolute  bottom-[-10px] flex justify-center">
      <svg width="14" height="8" class="svg">
        <path d="M 0 0 L 7 8 L 14 0" fill="${bt.fill}" stroke-width="1" stroke="${bt.stroke}"/>
      </svg>
    </div>
  </div>`
  }

  return {
    createBuildingPopupContent
  }
}
